import { useEffect, useMemo, useState } from 'react';
import { useSelector, shallowEqual } from 'react-redux';
import { IReducerState, IRootReducerState } from '@/store/root-reducer';
import { Button, Popconfirm, Space, Table, Toast } from '@douyinfe/semi-ui';
import {
  IconDeleteStroked,
  IconEditStroked,
  IconSearchStroked,
  IconInheritStroked,
} from '@douyinfe/semi-icons';
import { ColumnProps } from '@douyinfe/semi-ui/lib/es/table';
import { PaginationProps } from '@douyinfe/semi-ui/lib/es/pagination';
import { usePageContext } from '../context';
import TablePagination, {
  onPageParamsChange,
} from '@/widgets/table-pagination';
import { pageSizeOpts } from '../helper';
import BaseColumns from './columns';
import { deleteItem } from '@/redux/coordination/coordination-api';
import { fetchItems } from '@/redux/coordination/coordination-actions';
import { useDispatch } from 'react-redux';

const coordinationTable = () => {
  const dispatch = useDispatch<any>();
  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {
      queryParams: PageContext.queryParams,
      setQueryParams: PageContext.setQueryParams,
      addRecord: PageContext.addRecord,
      editRecord: PageContext.editRecord,
      allocationRecord: PageContext.allocationRecord,
      delRecord: PageContext.delRecord,
      detailRecord: PageContext.detailRecord,
    };
  }, [PageContext]);

  const { coordination } = useSelector<IRootReducerState, any>(
    (state) => ({ coordination: state.coordination }),
    shallowEqual
  );
  // entities
  const { entities, totalCount } = coordination;

  const columns: ColumnProps[] = useMemo(() => {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        // sorterKey: 'id',
        // sorter: true,
        width: 100,
        fixed: true,
        align: 'center',
        render: (_, __, index) => (
          <>
            {(PageAction.queryParams.pageNum - 1) *
              PageAction.queryParams.pageSize +
              index +
              1}
          </>
        ),
      },
      ...BaseColumns,
    ];
  }, []);

  const onRowEvent: any = useMemo(
    () => (record: any, index: number) => {
      return {
        className: 'group/item',
      };
    },
    []
  );

  const paginationOptions = useMemo(
    () => ({
      total: totalCount,
      queryParams: PageAction.queryParams,
      pageSizeOpts,
    }),
    [PageAction, coordination]
  );

  return (
    <TablePagination paginationOpts={paginationOptions}>
      {(paginationOpts: PaginationProps) => (
        <Table
          size='small'
          columns={columns}
          dataSource={entities}
          onChange={(params: any) =>
            onPageParamsChange(params, PageAction.setQueryParams)
          }
          pagination={paginationOpts}
          onRow={onRowEvent}
        />
      )}
    </TablePagination>
  );
};

export default coordinationTable;
